<template>
  <div class="upload-box">
    <!-- action:提交到服务器的地址 -->
    <!-- file-list:显示文件列表，格式是对象数组[{url:xxx},{url:xxx}] -->
    <!-- list-type:文件列表类型 -->
    <!-- on-remove:文件移除时的钩子函数 -->
    <!-- on-preview:图片预览时的钩子 -->
    <el-upload
      :on-preview="preview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :limit="1"
      :class="{disabled: fileComputed }"
      list-type="picture-card"
      action="#"
      :on-change=" handleChange"
      :http-request="upload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 预览弹框 -->
    <el-dialog width="600px" top="8vh" title="图片预览" :visible.sync="showDialog">
      <img width="100%" :src="imgUrl" alt="">
    </el-dialog>
    <!-- 进度条组件 -->
    <!-- <div>
      <div>上传进度：<el-progress style="width: 180px;" :percentage="percent" /></div>
    </div> -->
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
const cos = new COS({
  SecretId: 'AKIDskT4YpreASVJrOn0WotjJgqcFgx97CAu', // 身份识别ID
  SecretKey: 'auyueBUbVIrTI2Yr55zhCarwoW4RbWEi' // 身份秘钥
})
export default {
  name: 'ImgageUpload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      fileList: [
        { url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
      ],
      showDialog: false, // 控制显示弹层
      imgUrl: ''
    }
  },
  computed: {
    // 设定一个计算属性 判断是否已经上传完了一张
    fileComputed() {
      return this.fileList.length >= 1
    }
    // fileList:{
    //   get(){
    //     return [
    //       {
    //         url:this.value
    //       }
    //     ]
    //   }
    // },set(){

    // }
  },
  methods: {
    // 预览
    preview(file) {
      // 这里应该弹出一个层 层里是点击的图片地址
      this.imgUrl = file.url
      this.showDialog = true
    },
    // file 文件,
    // fileList 删除后的文件列表(结构中的)
    // this.fileList 数据中的文件列表
    handleRemove(file, fileList) {
      this.fileList = this.fileList.filter(item => item.uid !== file.uid) // 从data中移出对应项
    },
    // 自定义上传动作 有个参数 有个file对象，是我们需要上传到腾讯云服务器的内容
    upload(params) {
      if (!params.file) return
      // 将文件对象, 上传到腾讯云
      cos.putObject({
        Bucket: 'touxiang-1317057564', // 存储桶的名字
        Region: 'ap-nanjing', // 存储桶地域
        Key: params.file.name, // 上传到存储桶的文件名, 如果希望不重名, 可以对文件名进行处理
        StorageClass: 'STANDARD', // 上传模式, 标准模式
        Body: params.file, // 上传的文件对象
        // 上传的进度, 上传的过程中实时触发onProgress, 可以做进度条的展示
        onProgress: progressData => {
        }
      }, (err, data) => {
        if (err) return console.log(err)
        if (data.statusCode === 200) {
          const fileObj = this.fileList.find(item => item.uid === params.file.uid)
          // 更新状态
          fileObj.status = 'success'
          // 修改地址
          fileObj.url = 'https://' + data.Location
        }
      })
    },
    // 添加文件, 用户选了就应该新增文件预览
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleChange(file, fileList) {
      this.fileList = [...fileList]
      console.log(this.fileList)
    }
    // 配置上传前的校验, 只要通过校验, 才能进行上传
    // beforeUpload(file) {
    //   // 1. 限制文件类型 file.type
    //   const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
    //   if (!types.includes(file.type)) {
    //     this.$message.error('上传的图片格式, 必须是jpg, gif, bmp, png的格式!')
    //     return false
    //   }
    //   // 2. 限制文件大小 file.size
    //   if (file.size / 1024 / 1024 >= 5) {
    //     this.$message.error('上传头像过大, 超过了5M, 必须5M以内')
    //     return false
    //   }
    //   return true
    // }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none
    }
  }
}
</style>
